import React, { useState } from 'react';
import { Row, Col, Pagination } from 'antd';
import { Input } from 'antd';
import { DatePicker, Space } from 'antd';
import { Select, Modal } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import { Transfer } from 'antd';
import Xmfz from '../projectTeam/xmfz';
import request from '../../../http';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

//选择框
// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows,
    );
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

const projectTeam = () => {
  const [selectedRowKeys, setselectedRowKeys] = useState([]);

  const onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setselectedRowKeys({ selectedRowKeys });
  };

  const [data, setdata] = useState([
    {
      groupName: '1',
      grade: '1',
      className: '1',
      headTeacher: '1',
      name: '1',
      account: '1',
      identity: '1',
      gender: '1',
      email: '1',
      phone: '1',
      role: '1',
    },
  ]);

  // const Sanchu = () =>{
  //   //调用删除接口
  //   request
  //     .delete("/groupSelect/admin/AdminGroupDeleteOne",{
  //       data:{
  //         groupId:'1',
  //         studentAccount:'189000125',
  //       }

  //     }
  //   ).then((res:any)=>{
  //     console.log("删除接口返回结果数据",res.message);
  //     if(res.ok){
  //       alert("删除数据成功")
  //       //重载界面
  //       //location.reload(info());
  //     }
  //   })
  // };

  const getId = (id: any) => {
    console.log('我是对面传来的id', id);
    setId(id);
  };

  //存Id
  const [Id, setId]: any = React.useState();

  const columns = [
    {
      title: '小组名称',
      fixed: 'left',
      dataIndex: 'groupName',
      render: (text: string) => <a>{text}</a>,
    },

    {
      title: '院系',
      width: 100,
      dataIndex: 'profession',
      key: 'xmmc',
      fixed: 'left',
    },
    {
      title: '专业',
      dataIndex: 'faculty',
      key: '1',
      width: 100,
    },
    {
      title: '年级',
      dataIndex: 'grade',
      key: '2',
      width: 100,
    },
    {
      title: '班级',
      dataIndex: 'className',
      key: '3',
      width: 100,
    },
    {
      title: '班主任',
      dataIndex: 'headTeacher',
      key: '4',
      width: 100,
    },
    {
      title: '学员姓名',
      dataIndex: 'name',
      key: '5',
      width: 100,
    },
    {
      title: '学号',
      dataIndex: 'account',
      key: '6',
      width: 100,
    },
    {
      title: '身份证号码',
      dataIndex: 'identity',
      key: '4',
      width: 100,
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: '5',
      width: 100,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: '6',
      width: 100,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: '4',
      width: 100,
    },
    {
      title: '项目角色',
      dataIndex: 'role',
      key: '5',
      width: 100,
    },
  ];

  //接受传过来的ID
  const groupID = history.location.query;
  console.log('传过来的ID是 : ', groupID);

  //全局
  const [largeAccounnt, setLargeAccount]: any = useState();

  const [selectionType, setSelectionType] = React.useState<
    'checkbox' | 'radio'
  >('checkbox');
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  //Get管理员遍历所有小组
  const [setGroupSelect, setgGroupSelect] = React.useState();
  //Get根据小组id查询小组所有成员
  const [setGroupIdSelect, setgGroupIdSelect] = React.useState();
  //下拉框小组名称接口
  const [Xzmc, setXzmc] = React.useState([{}]);

  React.useEffect(() => {
    const parms: any = {
      //请求参数
      //number: pagination.pageSize, //一页10行
      //page: pagination.current, //第一页
      groupId: Id,
      studentAccount: largeAccounnt,
    };
    //调用公共的接口，填入请求的参数
    //loadDataSource(parms);

    console.log('Get根据小组id查询小组所有成员请求参数', parms);
    //01 Get管理员遍历所有小组 缺请求参数
    request.get('/groupSelect/admin/AdminGroupSelect').then(
      (result: any) => {
        console.log('父组件 Get管理员遍历所有小组result数据', result);
        console.log(
          '请求参数，delete删除单个成员,parms数据',
          Id,
          largeAccounnt,
        );
        if (result.success) {
          //获得成功响应返回的数据
          console.log(
            '父组件 Get管理员遍历所有小组result.data数据',
            result.data,
          );
          console.log(
            '请求参数，delete删除单个成员,parms数据',
            Id,
            largeAccounnt,
          );
          const setGroupSelect = result.data.map((item: any) => ({
            key: item.id,
            isGraduated: item.isGraduated,
            name: item.name,
            total: item.total,
          }));

          setgGroupSelect(setGroupSelect);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //02 Get根据小组id查询小组所有成员
    request
      .get('/groupSelect/admin/AdminGroupSelectAllMember/20210613140450')
      .then(
        (result: any) => {
          console.log('父组件 Get根据小组id查询小组所有成员result数据', result);
          if (result.success) {
            //获得成功响应返回的数据
            console.log(
              '父组件 Get根据小组id查询小组所有成员 result.data数据',
              result.data,
            );
            const setGroupIdSelect = result.data.map((item: any) => ({
              key: item.id,
              account: item.account,
              className: item.className,
              email: item.email,
              faculty: item.faculty,
              gender: item.gender === 0 ? '男' : '女',
              grade: item.grade,
              groupAdmin: item.groupAdmin === false ? '是' : '否',
              groupName: item.groupName,
              headTeacher: item.headTeacher,
              identity: item.identity,
              name: item.name,
              phone: item.phone,
              profession: item.profession,
              role: item.role,
            }));

            setgGroupIdSelect(setGroupIdSelect);
          }
        },
        (error) => {
          //错误返回错误信息
          console.log('请求错误');
        },
      );

    //03下拉框小组名称接口
    request.get('/groupSelect/admin/AdminGetAllGroup').then(
      (result: any) => {
        console.log('下拉框小组名称地址result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log('下拉框小组名称地址result.data数据', result.data);
          setXzmc(result.data);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  }, []);

  //教师接口存的数据
  const [data4, setData2] = React.useState();

  //获取表单的数据 查询
  const onSubmit = (value: any) => {
    //获取项目组
    console.log('查询表单数据', value);
    const parms = {
      ...value,
      //请求参数
      //number: pagination.pageSize, //一页10行
      //page: pagination.current, //第一页
    };

    //03下拉框小组名称接口 查询提交
    request.get(`/groupSelect/admin/AdminGroupSelectAllMember/${Id}`).then(
      (result: any) => {
        console.log(result);
        // 判断响应状态
        if (result.success) {
          //获得成功响应返回的数据
          alert('查询成功');
          console.log(result.data);

          const setGroupIdSelect = result.data.map((item: any) => ({
            key: `p_${item.id}`,
            account: item.account,
            className: item.className,
            email: item.email,
            faculty: item.faculty,
            gender: item.gender === 0 ? '男' : '女',
            grade: item.grade,
            groupAdmin: item.groupAdmin === false ? '是' : '否',
            groupName: item.groupName,
            headTeacher: item.headTeacher,
            identity: item.identity,
            name: item.name,
            phone: item.phone,
            profession: item.profession,
            role: item.role,
          }));

          // //获取分页请求的数据
          // const newPageObject = {
          //   ...pagination,
          //   current: parms.page,
          //   pageSize: parms.number,
          //   total: result.data.paginationData.sum,
          // };

          // //放分页的数据
          // setPagination(newPageObject);
          // setData2(data4);
          setgGroupIdSelect(setGroupIdSelect);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  };

  const [value, setValue] = React.useState(1);
  const [isModalVisible, setIsModalVisible] = useState(false);

  const onChange = (e: any) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  const showModal = () => {
    setIsModalVisible(true);
    //新增成员请求
    request
      .get('/studentManage/admin/QueryStudentInfoInClass')
      .then((res: any) => {
        console.log('管理员--新增成员成功了', res.data);
        const p = res.data;
        const newP = p.map((dataObj: any) => {
          return {
            groupName: dataObj.gender,
            profession: dataObj.dkey,
            faculty: dataObj.gkey,
            grade: dataObj.gradeKey,
            className: dataObj.className,
            headTeacher: dataObj.headTeacher,
            name: dataObj.name,
            account: dataObj.account,
            identity: dataObj.cardId,
            gender: dataObj.gender,
            email: dataObj.email,
            phone: dataObj.tel,
            role: dataObj.role,
          };
        });
        setdata(newP);
        // setsum(res.data.paginationData.sum);
        // setsumPage(res.data.paginationData.sumPage);
      });
  };

  console.log(data);

  //确认回调
  const handleOk = () => {
    setIsModalVisible(false);
    // request.post('/groupSelect/admin/AdminGroupNew',{
    //   name: GroupName
    // }).then((res) => {
    //   console.log("新建分组请求成功了",res)
    // });
  };

  //取消回调
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changableRowKeys: any) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter(
            (key: any, index: any) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            },
          );
          setselectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changableRowKeys: any) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter(
            (key: any, index: any) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            },
          );
          setselectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };
  return (
    <div>
      <Form onFinish={onSubmit} {...formItemLayout}>
        <div style={{ width: '300px', float: 'left' }}>
          <Xmfz Callback={getId} />
        </div>

        <div style={{ marginLeft: '30px', width: '800px', float: 'left' }}>
          <div>
            <div style={{ marginLeft: '8px', float: 'left', width: '300px' }}>
              <Form.Item name="groupName" label="小组名称：">
                <Select placeholder="请选择" allowClear>
                  {Xzmc.map((cNameObj: any) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.id}>
                        {cNameObj.groupName}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item name="account" label="学号：">
                <Input placeholder="请输入"></Input>
              </Form.Item>
            </div>
            <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
              <Form.Item name="name" label="学员姓名：">
                <Input></Input>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '10px' }}
                >
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </div>
              </Form.Item>
            </div>
            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '30px' }}
                >
                  <Button type="default" htmlType="submit">
                    重置
                  </Button>
                </div>
              </Form.Item>
            </div>

            <div style={{ clear: 'left', width: '50px' }}></div>

            <div style={{ float: 'left', width: '50px', marginLeft: '0px' }}>
              <Form.Item {...tailLayout}>
                <Button type="primary" onClick={showModal}>
                  +新增成员
                </Button>
              </Form.Item>
            </div>
            <div style={{ float: 'left', width: '50px', marginLeft: '70px' }}>
              <Form.Item {...tailLayout}>
                <Button type="default" htmlType="submit">
                  更新分组
                </Button>
              </Form.Item>
            </div>
            <div style={{ float: 'left', width: '50px', marginLeft: '40px' }}>
              <Form.Item {...tailLayout}>
                <Button type="default" htmlType="submit">
                  批量删除
                </Button>
              </Form.Item>
            </div>
          </div>
        </div>
      </Form>

      <div style={{ marginLeft: '30px', width: '800px', float: 'left' }}>
        <div
          style={{
            marginLeft: '8px',
            float: 'left',
            height: '50px',
            width: '99%',
            backgroundColor: '#ebf6f7 ',
          }}
        >
          <div style={{ marginTop: '8px' }}>
            <Button type="text">已选择XX项</Button>
            <Button type="link">清空</Button>
          </div>
        </div>
        <div style={{ marginLeft: '8px' }}>
          <Table
            rowSelection={{
              type: selectionType,
              ...rowSelection,
            }}
            columns={columns}
            dataSource={setGroupIdSelect}
            scroll={{ x: 1500, y: 300 }}
          />
        </div>

        <Modal
          title="新增成员"
          bodyStyle={{
            width: 1500,
            height: 700,
            backgroundColor: 'white',
            marginLeft: -450,
          }}
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
          okText="确认"
          cancelText="取消"
        >
          <Form>
            <div className="atForm">
              <span style={{ marginLeft: 0 }}>
                院系:{' '}
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="请选择"
                  // onChange={(e, index) => {
                  //   setgCollege(parseInt(index.key));
                  // }}
                >
                  {/* {College.map((cNameObj) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })} */}
                </Select>
              </span>
              <span style={{ marginLeft: 30 }}>
                专业:{' '}
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="请选择"
                  // onChange={(e, index) => {
                  //   setgMajor(parseInt(index.key));
                  // }}
                >
                  {/* {Major.map((cNameObj) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })} */}
                </Select>
              </span>
              <span style={{ marginLeft: 30 }}>
                年级:{' '}
                <Select
                  showSearch
                  style={{ width: 200 }}
                  placeholder="请选择"
                  // onChange={(e, index) => {
                  //   setgGrade(parseInt(index.key));
                  // }}
                >
                  {/* {Grade.map((cNameObj) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.format}>
                      {cNameObj.format}
                    </Option>
                  );
                })} */}
                </Select>
              </span>
              <br />
              <br />
              <div className="second">
                <span style={{ marginLeft: -30 }}>
                  班级:{' '}
                  <Select
                    showSearch
                    style={{ width: 200 }}
                    placeholder="请选择"
                    // onChange={(e, index) => {
                    //   setgClass1(parseInt(index.key));
                    // }}
                  >
                    {/* {Class1.map((cNameObj) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.format}>
                        {cNameObj.format}
                      </Option>
                    );
                  })} */}
                  </Select>
                </span>
                <span style={{ marginLeft: 32 }}>
                  小组:{' '}
                  <Select
                    showSearch
                    style={{ width: 200 }}
                    placeholder="请选择"
                    // onChange={(e, index) => {
                    //   setgGroup(parseInt(index.key));
                    // }}
                  >
                    {/* {Group.map((cNameObj) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.format}>
                        {cNameObj.format}
                      </Option>
                    );
                  })} */}
                  </Select>
                </span>
                <span style={{ marginLeft: 2 }}>
                  项目名称:{' '}
                  <Select
                    showSearch
                    style={{ width: 200 }}
                    placeholder="请选择"
                    // onChange={(e, index) => {
                    //   setgProjectName(parseInt(index.key));
                    // }}
                  >
                    {/* {ProjectName.map((cNameObj) => {
                    return (
                      <Option key={cNameObj.id} value={cNameObj.format}>
                        {cNameObj.format}
                      </Option>
                    );
                  })} */}
                  </Select>
                </span>
              </div>
              <br />
              <br />

              <Button
                type="primary"
                style={{ marginLeft: 800, top: -45 }}
                // onClick={Query}
              >
                查询
              </Button>
              <Button
                style={{ marginLeft: 20, top: -45 }}
                // onClick={reset}
              >
                重置
              </Button>
            </div>

            <div className="form" style={{ marginTop: -100 }}>
              <div>
                <Table
                  rowSelection={rowSelection}
                  columns={columns}
                  dataSource={data}
                  pagination={false}
                />
                <div>
                  <Pagination
                    total={100}
                    // onChange={pageChange}
                    hideOnSinglePage={true}
                  />
                </div>
              </div>
            </div>
          </Form>
        </Modal>
      </div>
    </div>
  );
};

export default projectTeam;
